<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="../js/echarts.min.js"></script>
</head>
<body background="../image/4.jpeg" style=" background-repeat:no-repeat ;background-size:100% 100%;
			background-attachment: fixed;opacity=0.4" >
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
       //准备数据
	   
	   //图5：个人业绩统计图
	   var XData=['苏珊','白露','赵琦','毕春艳','高伟','李兵','何庆','林茂','杨光'];
	   var yData=[899400, 503400, 831400, 1288700, 1200900, 444700, 283800, 618600, 705000];
       var option={
      	backgroundColor:"",
      	title:{text:'销售员个人业绩',textStyle:{color:'rgb(180,200,200)',fontSize:'20'},},
      	xAxis: {
      		axisTick: {
      			show: false
      		},
      		splitLine: {
      			show: false
      		},
      		splitArea: {
      			show: false
      		},
      		data: XData,
      		axisLabel: {
      			formatter: function(value) {
      				var ret = ""; //拼接加\n返回的类目项
      				var maxLength = 1; //每项显示文字个数
      				var valLength = value.length; //X轴类目项的文字个数
      				var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
      				if (rowN > 1) //如果类目项的文字大于3,
      				{
      					for (var i = 0; i < rowN; i++) {
      						var temp = ""; //每次截取的字符串
      						var start = i * maxLength; //开始截取的位置
      						var end = start + maxLength; //结束截取的位置
      						//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
      						temp = value.substring(start, end) + "\n";
      						ret += temp; //凭借最终的字符串
      					}
      					return ret;
      				} else {
      					return value;
      				}
      			},
      			interval: 0,
      			fontSize: 14,
      			fontWeight: 100,
      			textStyle: {
      				color: 'white',
      	
      			}
      		},
      		axisLine: {
      			lineStyle: {
      				color: 'white'
      			}
      		}
      	},
      	yAxis: {
      		name:'金额（元）',//给坐标轴起个名字
      		nameTextStyle:{
      		                         color:"#65ABE7", 
      		                         fontSize:12,  
      		                     },
      		axisTick: {
      			show: false
      		},
      		splitLine: {//分割线
      			show: false
      		},
      		splitArea: {
      			show: false
      		},
      		
      		axisLabel: {
      			textStyle: {
      				color: 'white',
      				fontSize: 10,
      			}
      		},
      		axisLine: {
      			lineStyle: {
      				color: 'white'
      			}
      		}
      	},
      	"tooltip": {
      		"trigger": "axis",
      		transitionDuration: 0,
      		backgroundColor: 'rgba(83,93,105,0.8)',
      		borderColor: '#535b69',
      		borderRadius: 8,
      		borderWidth: 2,
      		padding: [5, 10],
      		formatter: function (params, ticket, callback) {
      			var res = '';
      			for (var i = 0, l = params.length; i < l; i++) {
      				res += '' + params[i].seriesName + ' : ' + params[i].value + '<br>';
      			}
      			return res;
      		},
      		axisPointer: {
      			type: 'line',
      			lineStyle: {
      				type: 'dashed',
      				color: '#ffff00'
      			}
      		}
      	},
      	series: [{
      		name:'',
      		type:"bar",
      		itemStyle: {
      			normal: {
      				color: {
      					type: 'linear',
      					x: 0,
      					y: 0,
      					x2: 0,
      					y2: 1,
      					colorStops: [{
      						offset: 0,
      						color: '#00d386' // 0% 处的颜色
      					}, {
      						offset: 1,
      						color: '#0076fc' // 100% 处的颜色
      					}],
      					globalCoord: false // 缺省为 false
      				},
      				barBorderRadius: 15,
      			}
      		},
      		 label: {
      				normal: {
      					show: true,
      					position: "top",
      					textStyle: {
      						color: "#ffc72b",
      						fontSize: 10
      					}
      				}
      			},
      		data: yData,
      		barWidth: 16,
      	},{
      		name:'折线',
      		type:'line',
      		itemStyle : {  /*设置折线颜色*/
      			normal : {
      			   /* color:'#c4cddc'*/
      			}
      		},
      		data:yData
      	}]
      };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>
